
import jsPDF from "jspdf";
import autoTable, { Styles, UserOptions } from 'jspdf-autotable'
import { createTableBodyHtml, createTableHeaderHtml } from "./html";
import { createBody, createColumns } from "./default";
import html2canvas from 'html2canvas'

export interface PDFTableHeaderOption {
  prop: string
  width?: number | string
  label: string
  rowSpan?: boolean
}

export interface PDFTableOption {
  headers: PDFTableHeaderOption[]
  data: any[]
  rowSpan?: string
}

const defaultStyles: Partial<Styles> = {
  font: 'simhei',
  minCellHeight: 30,
  lineWidth: 0.1,
  fillColor: '',
  textColor: '#000',
  lineColor: '#000',
  valign: 'middle',
}

const baseUserOptions: UserOptions = {
  startY: 60,
  styles: defaultStyles,
  margin: { top: 30 },
  theme: 'grid',
  headStyles: { 
    halign: 'center'
  },
  bodyStyles: { 
    halign: 'left',
  },
  tableLineWidth: 0.1,
  tableLineColor: '#000',
}

export function createHtmlTableToPDF(config: PDFTableOption) {
  const doc = new jsPDF('p', 'pt');
  doc.setFont('simhei')
  doc.setFontSize(12)

  const width = doc.internal.pageSize.getWidth()
  const height = doc.internal.pageSize.getHeight()

  const id = 'pdf_table_' + new Date().getTime()
  const table = document.createElement('table')
  table.id = id

  createTableHeaderHtml(config.headers, table)
  createTableBodyHtml(config.data, config.headers, table)
  table.style.display = 'none'
  document.body.appendChild(table)

  autoTable(doc, { 
    html: `#${id}`,
    ...baseUserOptions,
    includeHiddenHtml: true,
    useCss: true,
    willDrawPage: (data) => {
      if(data.pageCount === 1) {
        doc.text('测试', width / 2, 30, { align: 'center' })
      }

      doc.setFontSize(10)
      doc.text(`第${data.pageCount}页`, width / 2, height - 20, { align: 'center',  })
      doc.setFontSize(12)
    }
  })

  const url = URL.createObjectURL(doc.output('blob'))
  window.open(url, '_blank')
  document.body.removeChild(table)
}

export const createTableToPDF = (config: PDFTableOption) => {
  const doc = new jsPDF('p', 'pt');
  doc.setFont('simhei')
  doc.setFontSize(14)

  const width = doc.internal.pageSize.getWidth()
  const height = doc.internal.pageSize.getHeight()

  console.log(width, height);

  autoTable(doc, {
    columns: createColumns(config),
    body: createBody(config),
    ...baseUserOptions,
    willDrawPage: (data) => {
      if(data.pageCount === 1) {
        doc.text('测试', width / 2, 30, { align: 'center' })
      }

      doc.setFontSize(10)
      doc.text(`第${data.pageCount}页`, width / 2, height - 20, { align: 'center',  })
      doc.setFontSize(14)
    }
  })

  const url = URL.createObjectURL(doc.output('blob'))
  window.open(url, '_blank')
};


export function createImageToPDF(elementList: HTMLElement[]) {
  const pdf = new jsPDF('p', 'pt')
  const width = pdf.internal.pageSize.getWidth()
  const height = pdf.internal.pageSize.getHeight()

  Promise.all(
    elementList.map((el) =>
      html2canvas(el, { scale: 5 }).then((canvas) => {
        console.log(canvas.width, canvas.height);
        return canvas.toDataURL('image/jpeg', 1)
      })
    )
  ).then((images) => {
    images.forEach((src) => {
      pdf.addImage(src, 'JPEG', 0, 0, width, height)
      pdf.addPage()
    })

    pdf.deletePage(pdf.getNumberOfPages())
    const url = URL.createObjectURL(pdf.output('blob'))
    window.open(url, '_blank')
  })
}